<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-row
          type="flex"
          justify="end"
          style="margin-bottom: 10px"
          size="mini"
        >
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="$router.push({ name: 'questions-new' })"
            >新增试题</el-button
          >
        </el-row>
        <el-form
          :model="form"
          :inline="true"
          label-position="left"
          label-width="auto"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  placeholder="请选择"
                  v-model="form.subjectID"
                  @change="getSubject"
                >
                  <el-option
                    v-for="item in simpleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select placeholder="请选择" v-model="form.catalogID">
                  <el-option
                    v-for="item in catalogueList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择" v-model="form.tags">
                  <el-option
                    v-for="item in simpleTagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="根据题干搜索"
                /> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select placeholder="请选择" v-model="form.questionType">
                  <el-option
                    v-for="item in questionTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select placeholder="请选择" v-model="form.difficulty">
                  <el-option
                    v-for="item in difficultyList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select placeholder="请选择" v-model="form.direction">
                  <el-option
                    v-for="(item, index) in directionList"
                    :key="item.index"
                    :label="item"
                    :value="item"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID">
                  <el-option label="超级管理员" value="超级管理元"></el-option>
                  <el-option label="录入管理员" value="录入管理员"></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName" /> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  v-model="form.province"
                  placeholder="请选择"
                  style="width: 95px; margin-right:5px"
                  @change="getCityData"
                >
                  <el-option
                    v-for="(item, index) in citySelect.province"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-select
                  placeholder="请选择"
                  v-model="form.city"
                  style="width: 95px"
                >
                  <el-option
                    v-for="(item, index) in citySelect.cityDate"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="5">
              <el-row type="flex" justify="end">
                <el-button size="mini" @click="removeForm">清除</el-button>
                <el-button type="primary" size="mini" @click="searchList"
                  >搜索</el-button
                >
              </el-row>
            </el-col>
          </el-row>
        </el-form>

        <el-tabs v-model="form.chkState" type="card" @tab-click="changClick">
          <el-alert type="info" show-icon>
            <template slot="title"> 数据一共{{ page.total }}条 </template>
          </el-alert>
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>

        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            :formatter="questionType"
            label="题型"
            width="100"
          >
          </el-table-column>
          <el-table-column label="题干" width="280">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            :formatter="difficulty"
            label="难度"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column
            prop="chkState"
            :formatter="chkType"
            label="审核状态"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column
            prop="publishState"
            :formatter="publishType"
            label="发布状态"
            width="120"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button @click="handleClick(row.id)" type="text" size="small"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="titleProcess(row.id)"
                :disabled="row.chkState === 1 || row.chkState === 2"
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.publishState === 1"
                @click="$router.push({path:`/questions/new/?id=${row.id}`})"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="grounding(row)">
                {{ row.publishState === 1 ? "下架" : "上架" }}
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="removeList(row.id)"
                :disabled="row.publishState === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :current-page.sync="page.page"
            :page-size="page.pagesize"
            @current-change="laodChoice"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <!-- 题目预览 -->
      <articles-preview ref="loadPreview" />
      <!-- 题目审核 -->
      <el-dialog
        title="题目审核"
        :visible="titleShow"
        width="400px"
        @close="closeClick"
      >
        <el-form :model="titleForm" :rules="rules" ref="titleRules">
          <el-form-item>
            <el-radio v-model="titleForm.chkState" label="2">通过</el-radio>
            <el-radio v-model="titleForm.chkState" label="1">拒绝</el-radio>
          </el-form-item>
          <el-form-item prop="chkRemarks">
            <el-input type="textarea" v-model="titleForm.chkRemarks"></el-input>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button @click="closeClick">取消</el-button>
          <el-button type="primary" @click="btnOK">确定</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { simple } from "@/api/hmmm/directorys";
import {
  choice,
  choiceCheck,
  choicePublish,
  remove
} from "@/api/hmmm/questions";
import { simple as simplexk } from "@/api/hmmm/subjects";
import { simple as simpleTags } from "@/api/hmmm/tags";
import { provinces, citys } from "@/api/hmmm/citys";
import ArticlesPreview from "../components/articles-preview.vue";
import {
  questionType,
  difficulty,
  chkType,
  publishType,
  direction
} from "@/api/hmmm/constants";
export default {
  components: {
    ArticlesPreview
  },
  data() {
    return {
      page: {
        page: 1,
        pagesize: 10,
        total: 0 // 总数
      },
      list: [], //  精选题库列表
      simpleList: [], // 学科列表
      catalogueList: [], // 目录
      form: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: 'all'
      },
      simpleTagsList: [], // 标签列表
      questionTypeList: questionType, // 试题类型
      difficultyList: difficulty, // 难度
      directionList: direction, // 方向
      citySelect: {
        // 获取省份 城市
        province: [],
        cityDate: []
      },
      titleShow: false, // 题目审核
      showDialog: false, // 预览组件显示
      titleForm: {
        chkState: "2",
        chkRemarks: "",
        id: ""
      },
      rules: {
        chkRemarks: [
          {
            required: true,
            message: "审核内容不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.laodChoice();
    this.simplexk();
    this.getProvinceData();
  },
  methods: {
    // 点击预览
    async handleClick(id) {
      // console.log(id);
      // const res = await detail(data);
      // this.titlePreview = res.data;
      // this.showDialog = true;
      this.$refs.loadPreview.loadDetail(id);
    },
    async laodChoice() {
      const { data } = await choice(this.page);
      this.list = data.items;
      this.page.total = data.counts;
    },
    // 格式化内容
    questionType(row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === cellValue * 1);
      // console.log(obj);
      return obj ? obj.label : "";
    },
    difficulty(row, column, cellValue, index) {
      const obj = difficulty.find(item => item.value === cellValue * 1);
      // console.log(obj);
      return obj ? obj.label : "";
    },
    chkType(row, column, cellValue, index) {
      // console.log(cellValue);
      const obj = chkType.find((item, index) => index === cellValue * 1);
      // console.log(obj);
      return obj ? obj.label : "";
    },
    publishType(row, column, cellValue, index) {
      // console.log(cellValue);
      const obj = publishType.find(item => {
        // console.log(item.value);
        return item.value === cellValue;
      });
      // console.log(obj);
      return obj ? obj.label : "已下架";
    },
    // 学科简单列表
    async simplexk() {
      const { data } = await simplexk();
      this.simpleList = data;
    },
    // 目录，标签  的简单列表
    async getSubject(id) {
      const { data } = await simple({ subjectID: id });
      const res = await simpleTags({ subjectID: id });
      // console.log(res);
      this.catalogueList = data;
      this.simpleTagsList = res.data;
    },
    // 获取省份
    getProvinceData() {
      // console.log(provinces());
      this.citySelect.province = provinces();
    },
    // 获取  市
    getCityData(e) {
      this.citySelect.cityDate = citys(e);
    },
    // 清除表单
    removeForm() {
      this.form = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      };
    },
    // 点击搜索
    async searchList() {
      const { data } = await choice(this.form);
      this.list = data.items;
      this.page.total = data.counts;
    },
    // 点击切换
    async changClick(tab, event) {
      // console.log(this.form.chkState);
      const params = {...this.form}
      if(params.chkState === 'all') params.chkState = null
      const {
        data: { items }
      } = await choice(params);
      // console.log(items);
      // const arr = items.filter(item => {
      //   // console.log(item.chkState);
      //   return item.chkState == tab.index - 1;
      // });
      // if (tab.index == 0) {
      //   this.laodChoice();
      // }
      this.list = items;
      this.page.total = items.length;
    },
    // 题目审核
    async titleProcess(id) {
      this.titleShow = true;
      this.titleForm.id = id;
    },
    closeClick() {
      this.titleForm = {
        chkState: "2",
        chkRemarks: "",
        id: ""
      };
      this.titleShow = false;
    },
    // 审核
    async btnOK() {
      console.log(this.titleForm);
      await this.$refs.titleRules.validate();
      await choiceCheck({
        ...this.titleForm,
        chkState: this.titleForm.chkState * 1
      });
      this.$message.success("操作成功");
      this.closeClick();
      this.laodChoice();
    },
    // 修改
    reviseTitle() {},
    // 上架
    async grounding(row) {
      if (row.publishState === 1) {
        await this.$confirm("你确定下架这道题目吗？");
        await choicePublish({ id: row.id, publishState: 0 });
      } else {
        await this.$confirm("你确定上架这道题目吗？");
        await choicePublish({ id: row.id, publishState: 1 });
      }
      this.$message.success("操作成功");
      this.laodChoice();
    },
    // 删除
    async removeList(id) {
      await this.$confirm("此操作将永久删除该题目，是否继续");
      await remove({ id });
      if (this.list.length === 1 && this.page.page > 1) {
        this.page.page--;
      }
      this.$message.success("删除成功");
      this.laodChoice();
    }
  }
};
</script>

<style scoped lang="scss"></style>
